<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <!-- <script src="/code/lib/jquery.js"></script> -->
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div id="sjh">
        <div class="title">
            <span class="active"><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入手机号：</label>
                <input type="text" id="phone">
            </div>
            <button>下一步</button>
        </div>
    </div>
    <!-- --------------------------------------------------->
    <br>

    <div id="mbwt" style="display: none;">
        <div class="title">
            <span><i>1</i>输入找回账号</span>
            <span class="active"><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label> 用户名：</label>
                <input type="text" value="" id="username">
            </div>
            <div class="input-item">
                <label> 手机号：</label>
                <input type="text" value="" id="phone">
            </div>
            <div class="input-item">
                <label>密保问题：</label>
                <input type="text" value="" id="question">
            </div>
            <div class="input-item">
                <label>密保答案：</label>
                <input type="text" id="answer">
            </div>
            <button id="prev">上一步</button>
            <button id="next">下一步</button>
        </div>
    </div>

    <!-- --------------------------------------------- -->
    <br>
    <hr>
    <div id="ljcz" style="display: none;">
        <div class="title">
            <span><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span class="active"><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入新密码：</label>
                <input type="password" id="password">
            </div>
            <button id="preve">上一步</button>
            <button id="goto">立即重置</button>
        </div>
    </div>
    <script src="/jquery.js"></script>
    <script src="/axios.js"></script>
    <script>
        //注册点击事件
        //     $('#sjh button').on('click', function(e){
        //       e.preventDefault()
        //       console.log(111);
        //       const phone =  $('#sjh #phone').val().trim() 
        //       if(phone.length <= 0) alert('请输入正确的手机号！')
        //       $.ajax({
        //         method:'get',
        //         url:'http://124.223.14.236:3001/api/user/findPwd',
        //         data:{
        //             phone
        //         },
        //         success:function(res){
        //         console.log(res);
        //         // 接收返回的数据
        //         const id = res.data.id
        //         const question = res.data.question
        //         const phone = res.data.phone
        //         const username = res.data.username
        //         //将数据传到页面渲染
        //         $('#mbwt #phone').val(phone)
        //         $('#question').val(question)
        //         $('#username').val(username)
        //         // 切换显示隐藏
        //         $('#sjh').hide()
        //         $('#mbwt').show()
        //         // 给密码答案注册事件
        //         $('#next').on('click',function(e){
        //          e.preventDefault()
        //          console.log(222);
        //          const answer =  $('#answer').val().trim()
        //          if(answer.length <= 0) alert('请输入正确的手机号！')
        //          $('#ljcz').show()
        //         $('#mbwt').hide()
        //         // 给立即重置注册点击事件
        //          $('#goto').on('click',function(e){
        //          e.preventDefault()
        //          console.log(222);
        //          const password = $('#ljcz #password').val().trim()
        //          if(password.length <= 0) alert('请输入新的密码！')
        //          // 提交修改数据
        //          $.ajax({
        //         method:'post',
        //         url:'http://124.223.14.236:3001/api/user/resetPwd',
        //         data:{
        //             id,answer,password
        //         },
        //         success:function(res){
        //             console.log(res);
        //             //判断响应是否成功
        //             if(res.status !== 200){
        //             $('#sjh').show()
        //             $('#ljcz').hide()
        //             $('#sjh #phone').val('')
        //             $('#answer').val('')
        //             $('#ljcz #password').val('')
        //            return  alert(res.msg)
        //             }
        //             else{
        //                alert('密码修改成功！') 
        //             }
        //             }
        //           })
        //         })
        //       })
        //     }
        //   })
        // })
        //     // 返回上一步操作
        //     $('#prev').on('click',function(){
        //         $('#sjh').show()
        //         $('#mbwt').hide()
        //     })
        //     $('#preve').on('click',function(){
        //         $('#mbwt').show()
        //         $('#ljcz').hide()
        //     })









        function we(ee) {
            return document.querySelector(ee)
        }
        we()

        we('#sjh button').addEventListener('click', async function (e) {
            e.preventDefault()
            console.log(111);
            const phone1 = $('#sjh #phone').val().trim()
            if (phone1.length <= 0) alert('请输入正确的手机号！')
            const { data: res } = await axios.get('http://124.223.14.236:3001/api/user/findPwd', {
                params: {
                    phone: phone1
                }
            })
            console.log(res);
            // 接收返回的数据
            const id = res.data.id
            const question = res.data.question
            const phone = res.data.phone
            const username = res.data.username
            //将数据传到页面渲染
            we('#mbwt #phone').value = phone
            we('#question').value = question
            we('#username').value = username
            // 切换显示隐藏
            we('#sjh').style.display = 'none'
            we('#mbwt').style.display = 'block'
            // 给密码答案注册事件
            we('#next').addEventListener('click', function (e) {
                e.preventDefault()
                let answer = we('#answer').value
                if (answer.length <= 0) alert('请输入正确的手机号！')
                we('#mbwt').style.display = 'none'
                we('#ljcz').style.display = 'block'
                // 给立即重置注册点击事件
                we('#goto').addEventListener('click', async function (e) {
                    e.preventDefault()
                    let password = we('#ljcz #password').value
                    if (password.length <= 0) alert('请输入新的密码！')
                    // 提交修改数据
                    const res = await axios.post('http://124.223.14.236:3001/api/user/resetPwd', {
                        id,
                        answer,
                        password
                    })
                    console.log(res);
                    if (res.status !== 200) {
                        we('#sjh').style.display = 'none'
                        we('#ljcz').style.display = 'block'
                        we('#sjh #phone').value = ''
                        we('#answer').value = ''
                        we('#ljcz #password').value = ''
                        return alert('密码修改失败！')
                    }
                    else {
                        alert('密码修改成功！')
                    }
                })
            })
        })

        // 返回上一步操作
        we('#prev').addEventListener('click', function () {
            we('#sjh').style.display = 'block'
            we('#mbwt').style.display = 'none'
        })

        we('#preve').addEventListener('click', function () {
            we('#mbwt').style.display = 'block'
            we('#ljcz').style.display = 'none'
        })








    </script>
</body>

</html>